<template>
  <div>
    <el-form :model="formData" :rules="rules" label-width="100px" ref="formData">
      <el-form-item label="开始时间" prop="applyStartTime">
        <el-date-picker v-model="formData.applyStartTime" type="datetime" placeholder="选择开始时间" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="startOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="applyEndTime">
        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.applyEndTime" type="datetime" placeholder="选择结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item  label="用车原因" prop="applyRemake">
        <el-input style="width: 220px" :rows="6" v-model="formData.applyRemake" type="textarea" :maxlength="150" show-word-limit placeholder="请输入用车原因"/>
      </el-form-item>
      <el-form-item label="是否需要司机">
        <el-radio-group v-model="formData.isDriver">
          <el-radio :label="1">需要</el-radio>
          <el-radio :label="2">自驾</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否指定车辆">
        <el-radio-group @input="changeIsCar" v-model="formData.isCar">
          <el-radio :label="2">任意车辆</el-radio>
          <el-radio :label="1">指定车辆</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="formData.isCar === 1" label="选择车辆">
        <el-select v-model="formData.carId">
          <el-option v-for="car in carList" :key="car.id" :label="car.carNo" :value="car.id" :disabled="car.status === 2 || car.aid">
            <div style="display: flex;align-items: center;justify-content: space-between">
              <span>{{car.carNo}}</span>
              <span>{{car.brandName}}</span>
            </div>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button type="warning" @click="$router.back()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const formData = {
  id: '',
  applyRemake: '',
  applyStartTime: '',
  applyEndTime: '',
  isDriver: 1,
  isCar: 2,
  carId: ''
}
export default {
  name: 'ApplyView',
  data () {
    return {
      formData: {
        ...formData
      },
      rules: {
        applyStartTime: [{
          required: true,
          message: '请选择开始时间'
        }],
        applyEndTime: [{
          required: true,
          message: '请选择结束时间'
        }, {
          validator: (rule, value, cb) => {
            const valueDate = new Date(value.replace(' ', 'T'))
            const applyDate = new Date(this.formData.applyStartTime.replace(' ', 'T'))
            if (valueDate.getTime() < applyDate.getTime()) {
              cb(new Error('结束时间不能在开始时间之前'))
            } else {
              cb()
            }
          }
        }],
        applyRemake: [{
          required: true,
          message: '请输入用车原因'
        }]
      },
      carList: [],
      startOptions: {
        disabledDate (value) {
          return value.getTime() < new Date().getTime()
        }
      }
    }
  },
  methods: {
    submit () {
      this.$refs.formData.validate(valid => {
        if (valid) {
          this.$http.post('apply/update', this.formData).then(() => {
            this.$message.success(`${this.formData.id ? '修改' : '申请'}成功`)
            this.$router.push('myapply')
          }).catch(() => {})
        }
      })
    },
    changeIsCar (e) {
      if (e === 1) {
        if (this.formData.applyStartTime && this.formData.applyEndTime) {
          this.$http.get('car/use/select', this.formData).then(data => {
            if (data) {
              this.carList = [...data]
            }
          }).catch(() => {})
        } else {
          this.formData.isCar = 2
          this.$message.error('请先选择用车时间！')
        }
      }
    },
    init (id) {
      this.formData = { ...formData }
      if (id) {
        this.$http.get('apply/info/' + id).then(data => {
          if (data) {
            this.formData = { ...data }
          }
        }).catch(() => {
          this.$router.replace('/home')
        })
      } else {
        this.$refs.formData.resetFields()
      }
    }
  },
  watch: {
    $route (to) {
      this.init(to.query.id)
    }
  },
  created () {
    this.init(this.$route.query.id)
  }
}
</script>

<style scoped>

</style>
